<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>个人订单管理</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .layui-form-item .layui-input-inline {
            float: left;
            width: 214px;
            margin-right: 58px;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <script type="text/html" id="modeTpl">
        {{#  if(d.sbFreightmode == 1){ }}
        <span style="color: #F581B1;">货到付款</span>
        {{#  } else { }}
        <span style="color: #8581f5;">立即结算</span>
        {{#  } }}
    </script>
</head>
<body>
<div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="totime" readonly id="totime" autocomplete="off"
                       placeholder="请输入日期" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">到达时间</label>
            <div class="layui-input-inline">
                <input type="text" name="totime" readonly id="gotime" autocomplete="off"
                       placeholder="请输入日期" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">货运单编号</label>
            <div class="layui-input-inline">
                <input type="text" name="wayNum" id="wayNum" autocomplete="off"
                       placeholder="请输入货运单编号" class="layui-input">
            </div>
        </div>
        <button class="layui-btn layui-btn-sm" id="suo">搜索</button>
    </div>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="jijian">寄件</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">状态</a>
    <a class="layui-btn layui-btn-xs" lay-event="mingxi">明细</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消</a>
</script>

<script>
    var table;
    layui.use(['layer', 'table', 'jquery', 'laydate'], function () {
        var layer = layui.layer //弹层
            , $ = layui.$//使用内置jquery
            , laydate = layui.laydate
        table = layui.table //表格

        laydate.render({
            elem: '#totime'
        });
        laydate.render({
            elem: '#gotime'
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , id: 'testReload'
            , height: 600
            , url: '/logisticsSignbill/queryAll' //数据接口
            , title: '订单表'
            , page: true //开启分页
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'wayNum', title: '货运单编号', width: 160, sort: true, fixed: 'left'}
                , {field: 'wayName', title: '货物类型名字', width: 120}
                , {field: 'signbillId', title: '订单ID', width: 80}
                , {field: 'sbSendname', title: '发货人名字', width: 120, sort: true,}
                , {field: 'sbSendarea', title: '发货地址', width: 180}
                , {field: 'sbSendphone', title: '发货人电话', width: 120}
                , {field: 'sbFreightmode', title: '运费结算方式', width: 100 ,sort: true, templet: '#modeTpl'}
                , {field: 'sbConsignname', title: '收货人名字', width: 120}
                , {field: 'sbConsignphone', title: '收货人电话', width: 120}
                , {field: 'sbConsignarea', title: '收货地址', width: 180}
                , {field: 'sbDate', title: '下单时间', width: 120}
                , {field: 'sbWaytype', title: '货物类型描述', width: 180}
                , {fixed: 'right', width: 210, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'jijian':
                    layer.open({
                        type: 2,
                        area: ['750px', '650px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: '/send.html'
                    });
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'edit') {
                layer.open({
                    type: 2,
                    area: ['900px', '750px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/state.html?wayNum='+ data.wayNum
                });
            } else if (layEvent === 'update') {
                let url="logisticsSignbill/queryway";
                let date={wayNum:data.wayNum};
                $.get(url,date,function (rep) {
                    if(rep.state==1){
                        layer.msg("该订单已接单，无法修改");
                    }else {
                        layer.open({
                            type: 2,
                            area: ['900px', '750px'],
                            fixed: false, //不固定
                            maxmin: true,
                            content: '/send.html?id='+ data.signbillId
                        });
                    }
                })
            } else if (layEvent === 'del') {
                let urls="logisticsSignbill/queryway";
                let dates={wayNum:data.wayNum};
                $.get(urls,dates,function (rep) {
                    if(rep.state==1){
                        layer.msg("该订单已接单，无法取消");
                    }else {
                        let url="logisticsSignbill/delete";
                        let date={signbillId:data.signbillId,wayNum:data.wayNum};
                        $.post(url,date,function (rep) {
                            if(rep.state==1){
                                table.reload("testReload");
                                layer.msg("操作成功");
                            }
                        },"json");
                    }
                })
            }else if(layEvent === 'mingxi'){
                layer.open({
                    type: 2,
                    area: ['600px', '400px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/receipt.html?wayNum='+ data.wayNum
                });
            }
        });
    });
</script>
<script>
    $(function (){
        $("#suo").on("click",function (){
            var data={
                totime:$("#totime").val(),
                gotime:$("#gotime").val(),
                wayNum:$("#wayNum").val()
            }
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: data
            });
        })
    })
</script>
</body>
</html>